/*
    安装 react-router v6 版  yarn add react-router-dom@6
*/
import Home from './route-dome/Home'
import About from './route-dome/About'
// 编程式导航: useNavigate
import Login from './route-dome/Login'

// 二级路由
import Layout from './route-dome/Layout'
import Board from './route-dome/children/Board'
import Article from './route-dome/children/Article'

// 404页面
import NotFound from './route-dome/NotFound'

// 路由引入、配置
import {BrowserRouter, Routes, Route, Link} from 'react-router-dom'

/*
    核心组件： BrowserRouter
        包裹整个应用，一个React应用只需要使用一次
        两个常用Router: HashRouter (hash模式) 和 BrowserRouter (history模式)
    
    核心组件： Link
        指定导航链接
        最终渲染为 a 链接

    核心组件： Routes
        路由出口：满足条件的路由自己会渲染到此组件内部

    核心组件： Route
        指定导航链接，完成路由匹配
*/

export default function Test12_router() {
  return (
    // 声明当前要用一个非hash模式的路由
    <BrowserRouter>
        {/* 指定跳转的路由，to配置路由地址 */}
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
        {/* 路由出口，路由对应的组件会在这里渲染 */}
        <Routes>
            {/* 指定路径和组件的对应关系，path代表路径， element代表组件 成对出现 */}
            <Route path='/' element={<Home />}></Route>
            {/* <Route path='/about' element={<About />}></Route> */}
            {/* 动态路由匹配，params传参时 */}
            <Route path='/about/:id' element={<About />}></Route>
            <Route path='/login' element={<Login />}></Route>

            <Route path='/layout' element={<Layout />}>
                {/* 嵌套路由声明,  二级路径不要加 / */}
                {/* <Route path='board' element={<Board />}></Route> */}
                {/* 默认渲染的二级路由， 添加 index 属性， 把自己的path去掉 */}
                <Route index element={<Board />}></Route>
                <Route path='article' element={<Article />}></Route>

            </Route>
            {/* 默认无匹配时 404 页面 */}
            <Route path='*' element={<NotFound />}></Route>
        </Routes>
    </BrowserRouter>
  )
}
